<template>
    <!-- 内容-->
    <view class="main">
        <view class="content" v-for="(item, index) in stock">
            <view class="first-line">
                <view class="info">
                    <view class="name">{{ item.stockName }}</view>
                    <view class="code">{{ item.symbol }}</view>
                </view>
                <image class="info-more" v-if="item.rate > 0 && item.rate != 0" src="../../../static/icon/increase.png"
                    mode="" />
                <image class="info-more" v-else-if="item.rate < 0 && item.rate != 0" src="../../../static/icon/decrease.png"
                    mode="" />
                <image class="info-more" v-else src="../../../static/icon/more-grey.png" mode="" />
            </view>
            <view class="second-line">
                <view
                    :class="['dot1', { red: item.rate > 0 && item.rate != 0 }, { green: item.rate < 0 && item.rate != 0 }]">
                    {{ item.regularMarketPrice }}</view>
                <view
                    :class="['dot2', { red: item.rate > 0 && item.rate != 0 }, { green: item.rate < 0 && item.rate != 0 }]">
                    {{ item.rate }}%</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { requestApi } from '@/api';
import { onUnload, onLoad } from '@dcloudio/uni-app';
import { useStockStore } from '@/stores'

// 仓库
const store = useStockStore()
// 获取股票类型信息
const stock = ref([])
const option = {
    keyWords: '',
    pageNum: '',
    pageSize: '',
}
const unsubscribe = store.$onAction(({
    name,  //action 函数的名称
    store,  //store 实例，这里是 mainStore
    args, //action 函数参数数组
    after,  //钩子函数，在action函数执行完成返回或者resolves后执行
    onError // 钩子函数，在action函数报错或者rejects后执行
}) => {
    after(result => {
        if (name == 'addSortStock') {
            getOptionByUserId()
        }
    })
})
// 查询用户申购列表
async function getOptionByUserId() {
    const { data, status } = await requestApi.getOptionByUserId(option)
    if (status == 0) {
        stock.value = data.map((item) => {
            let { stockName, result } = item
            const res = result.map((ele) => {
                const { regularMarketPrice, rate, symbol } = ele.meta
                let numrate = 100 * rate
                numrate = Number(numrate.toFixed(2))
                return {
                    regularMarketPrice,
                    rate: numrate,
                    symbol: symbol.match(/^[^\.]+/)[0]
                }
            })
            const { regularMarketPrice, rate, symbol } = res[0]
            return {
                stockName,
                regularMarketPrice,
                rate,
                symbol
            }
        })
    }
}
let timer = null
onUnload(() => {
    unsubscribe()
    clearInterval(timer)
})
onLoad(() => {

    timer = setInterval(() => {
        getOptionByUserId()
    }, 6000)
})


</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}


.active {
    color: #fff;
}

.main {
    margin: 26rpx 40rpx 0rpx;
    display: grid;
    grid-column-gap: 20rpx;
    column-gap: 20rpx;
    grid-row-gap: 26rpx;
    row-gap: 26rpx;
    grid-template-columns: repeat(2, minmax(0, 1fr));


    .first-item,
    .content {
        background-color: #292A36;
        width: 324rpx;
        height: 197rpx;
        border-radius: 40rpx;

        .first-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 37rpx;
            padding-left: 24rpx;
            padding-right: 26rpx;

            .info {
                .name {
                    color: #fff;
                    font-size: 28rpx;
                }

                .code {
                    color: #7E8394;
                    font-size: 24rpx;
                }
            }


            .info-more {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .second-line {
            display: flex;
            justify-content: space-between;
            padding-left: 24rpx;
            padding-right: 26rpx;
            margin-top: 25rpx;

            .dot1,
            .dot2 {
                color: #7E8394;
                height: 43rpx;
            }
        }

    }
}

.uni-popup {
    height: 20vh;
}

.red {
    color: #F04848 !important;
}

.green {
    color: #22A875 !important;
}
</style>